<template>
    <LayoutWrap class="transcations">
        <ul class="list-head" style="padding-bottom: 0;">
            <li class="list-head-item">
                <ExcelUpload
                    :disabled="tableSuccessData.length !== 0"
                    :key="uploadKey"
                    :on-error="handleError"
                    :on-success="handleSuccess"
                    :validSheetCell="['A1', '支付宝交易记录明细查询']"
                    :sheetrange="[5, -7]"
                    type="primary"
                    style="min-width: 200px;"
                    ><i class="el-icon-upload2"></i>批量导入支付宝交易记录明细</ExcelUpload
                >
            </li>
            <li class="list-head-item">
                <el-button
                    @click="handleClear"
                    :disabled="tableSuccessData.length === 0"
                    type="danger"
                    style="min-width: 200px;"
                    ><i class="el-icon-delete"></i>清空本地数据继续上传</el-button
                >
            </li>
        </ul>

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin: 20px 0">
            <el-tab-pane label="导入成功列表" name="success">
                <ul class="list-head" style="padding-bottom: 0;">
                    <li class="list-head-item">
                        <CheckedColumns
                            :checkedId="checkedId"
                            :dataSource="checkedOpts"
                            v-model="checkedValues"
                        ></CheckedColumns>
                    </li>
                    <li class="list-head-item">
                        <ExcelJsonDownload
                            :disabled="tableSuccessData.length === 0"
                            :key="`${uploadKey}导入成功列表数据`"
                            type="text"
                            filename="导入成功列表数据{YYYYMMDD_HHmmss}"
                            :tHeader="tHeader"
                            :filterVal="filterVal"
                            :data="tableSuccessData"
                            :beforeData="beforeData"
                            :afterData="afterData"
                            bookType="csv"
                            ><i class="el-icon-download"></i>下载导入成功列表数据</ExcelJsonDownload
                        >
                    </li>
                </ul>
                <el-table :data="tableSuccessSliceData" border>
                    <template v-for="item in columnData">
                        <el-table-column
                            v-if="checkedValues.includes(item.prop)"
                            :key="item.key"
                            :prop="item.prop"
                            :label="item.label"
                        ></el-table-column>
                    </template>
                </el-table>
                <Pagination
                    :page-size.sync="formSuccess.pageSize"
                    :page.sync="formSuccess.page"
                    :total="formSuccess.count"
                />
            </el-tab-pane>
            <el-tab-pane label="导入失败列表" name="failed">
                <ul class="list-head" style="padding-bottom: 0;">
                    <li class="list-head-item">
                        <CheckedColumns
                            :checkedId="checkedId"
                            :dataSource="checkedOpts"
                            v-model="checkedValues"
                        ></CheckedColumns>
                    </li>
                    <li class="list-head-item">
                        <ExcelJsonDownload
                            :disabled="tableFailedData.length === 0"
                            :key="`${uploadKey}导入失败列表数据`"
                            type="text"
                            filename="导入成功列表数据{YYYYMMDD_HHmmss}"
                            :tHeader="tHeader"
                            :filterVal="filterVal"
                            :data="tableFailedData"
                            :beforeData="beforeData"
                            :afterData="afterData"
                            ><i class="el-icon-download"></i>下载导入失败列表数据</ExcelJsonDownload
                        >
                    </li>
                </ul>
                <el-table :data="tableFailedSliceData" border>
                    <template v-for="item in columnData">
                        <el-table-column
                            v-if="checkedValues.includes(item.prop)"
                            :key="item.key"
                            :prop="item.prop"
                            :label="item.label"
                        ></el-table-column>
                    </template>
                </el-table>
                <Pagination
                    :page-size.sync="formFailed.pageSize"
                    :page.sync="formFailed.page"
                    :total="formFailed.count"
                />
            </el-tab-pane>
        </el-tabs>
    </LayoutWrap>
</template>
<script>
import ExcelUpload from '@/components/ExcelUpload/index';
import ExcelJsonDownload from '@/components/ExcelJsonDownload/index';
import CheckedColumns from '@/components/CheckedColumns';
import getObjKeys from '@/views/account/alipay/getObjKeys';
import getCheckedColumns from '@/views/account/getCheckedColumns';
import {THE_CHECKED_ALIPAY} from '@/utils/list-types';
import moment from 'moment';

export default {
    name: 'transcations',
    components: {
        ExcelUpload,
        ExcelJsonDownload,
        CheckedColumns
    },
    data() {
        const beforeData = [
            ['支付宝交易记录明细查询'],
            ['账号:[18230275891]'],
            ['起始日期:[2020-10-22 00:00:00]   终止日期:[2020-10-28 16:23:09]'],
            ['---------------------------------交易记录明细列表------------------------------------']
        ];
        const afterData = [
            ['------------------------------------------------------------------------------------'],
            ['占位行，请勿删除该行1'],
            ['占位行，请勿删除该行2'],
            ['占位行，请勿删除该行3'],
            ['占位行，请勿删除该行4'],
            ['占位行，请勿删除该行5'],
            ['占位行，请勿删除该行6']
        ];

        const objKeys = getObjKeys(); // => {['name']: 'name'}

        const tHeader = Object.keys(objKeys);
        const filterVal = Object.values(objKeys);

        const columnData = Object.keys(objKeys).map(item => ({key: objKeys[item], prop: objKeys[item], label: item}));

        return {
            moment,
            beforeData,
            afterData,
            tHeader,
            filterVal,

            formSuccess: {
                count: 0, // 总条数
                pageSize: 5, // 一页多少条
                page: 1 // 当前第几页
            },
            formFailed: {
                count: 0, // 总条数
                pageSize: 5, // 一页多少条
                page: 1 // 当前第几页
            },
            activeName: 'success',
            uploadKey: 'transcations',
            objKeys: objKeys,
            tableSuccessData: [], // 成功的数据
            tableFailedData: [], // 失败的数据
            columnData,
            checkedValues: [
                'FundingStatus',
                'SuccessfulRefund',
                'IncomeOrExpenditure',
                'tradingStatus',
                'ServiceFee',
                'TransactionNumber',
                'Remarks',
                'PaymentTime',
                'BusinessOrderNumber'
            ], // 默认选中的
            checkedOpts: getCheckedColumns(getObjKeys()), // 需要选择的数据[{}, {label: '', value: ''}]
            checkedId: THE_CHECKED_ALIPAY
        };
    },
    computed: {
        // 分页后 成功的数据
        tableSuccessSliceData() {
            const {page, pageSize} = this.formSuccess;
            const output = this.tableSuccessData.slice((page - 1) * pageSize, page * pageSize);
            return output;
        },
        // 分页后 导入失败的数据
        tableFailedSliceData() {
            const {page, pageSize} = this.formSuccess;
            const output = this.tableFailedData.slice((page - 1) * pageSize, page * pageSize);
            return output;
        }
    },
    methods: {
        // 清空数据
        handleClear() {
            const {formSuccess, formFailed, tableSuccessData, tableFailedData} = this.$options.data();
            this.formSuccess = formSuccess;
            this.formFailed = formFailed;
            this.tableSuccessData = tableSuccessData;
            this.tableFailedData = tableFailedData;
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        },
        handleError(error) {
            this.uploadKey = Math.random();
            console.log('error', error);
            this.$message({message: error, type: 'error'});
        },
        handleSuccess({results, header}) {
            console.log('results', results);
            console.log('header', header);
            this.uploadKey = Math.random();
            const newObj = this.objKeys;

            this.tableSuccessData = results.map(item => {
                const newChild = {};
                Object.keys(item).forEach(child => {
                    newChild[newObj[child]] = item[child];
                });
                return newChild;
            });

            this.formSuccess = {
                ...this.formSuccess,
                count: this.tableSuccessData.length // 总条数
            };
        }
    }
};
</script>
